<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<title>F.canvas</title>
<link type="text/css" rel="stylesheet" href="../css/admin.css" />
<link type="text/css" rel="stylesheet" href="../css/item_show.css" />
<script type="text/javascript" src="../../1st.js"></script>
<script type="text/javascript" src="../../1st.highlight.js"></script>
</head>
<body id="split">
<div id="content">
	<div rel="F.param">
		<h2><span>返回值:</span>F.canvas</h2>
					<h3>概述 : 绘图类</h3>
									<h3>语法1：F.canvas(box);</h3>
							<div>描述：链头</div>
						<table class="args">
				<!--caption>参数列表：(1)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>box</strong></td><td>ID,Node</td><td>容器</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>fdom</td><td>返回draw链</td></tr>
			</table>
					<h3>语法2：.ops(fillcolor,strokecolor,strokeweight)</h3>
							<div>描述：设置参数</div>
						<table class="args">
				<!--caption>参数列表：(3)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>fillcolor</strong></td><td>String</td><td>填充颜色</td></tr>
									<tr><td><strong>strokecolor</strong></td><td>String</td><td>画笔颜色</td></tr>
									<tr><td><strong>strokeweight</strong></td><td>String</td><td>画笔宽度</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>fdom</td><td>返回draw链</td></tr>
			</table>
					<h3>语法3：.range(x,y,w,h)</h3>
							<div>描述：设置位置尺寸大小</div>
						<table class="args">
				<!--caption>参数列表：(4)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>x</strong></td><td>Number</td><td>画布Left</td></tr>
									<tr><td><strong>y</strong></td><td>Number</td><td>画布Top</td></tr>
									<tr><td><strong>w</strong></td><td>Number</td><td>画布宽度</td></tr>
									<tr><td><strong>h</strong></td><td>Number</td><td>画布高度</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>fdom</td><td>返回draw链</td></tr>
			</table>
					<h3>语法4：.copy()</h3>
							<div>描述：拷贝</div>
						<table class="args">
				<!--caption>参数列表：(0)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>fdom</td><td>返回一个新的draw链</td></tr>
			</table>
					<h3>语法5：.circle(x,y,r)</h3>
							<div>描述：画圆</div>
						<table class="args">
				<!--caption>参数列表：(3)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>x</strong></td><td>Number</td><td>X坐标</td></tr>
									<tr><td><strong>y</strong></td><td>Number</td><td>Y坐标</td></tr>
									<tr><td><strong>r</strong></td><td>Number</td><td>半径</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>fdom</td><td>返回draw链</td></tr>
			</table>
					<h3>语法6：.rect(x1,y1,x2,y2)</h3>
							<div>描述：画矩形</div>
						<table class="args">
				<!--caption>参数列表：(4)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>x1</strong></td><td>Number</td><td>X坐标1</td></tr>
									<tr><td><strong>y1</strong></td><td>Number</td><td>Y坐标1</td></tr>
									<tr><td><strong>x2</strong></td><td>Number</td><td>X坐标2</td></tr>
									<tr><td><strong>y2</strong></td><td>Number</td><td>Y坐标2</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>fdom</td><td>返回draw链</td></tr>
			</table>
					<h3>语法7：.polygon(x1,y1,......,xn,yn)</h3>
							<div>描述：画多边形</div>
						<table class="args">
				<!--caption>参数列表：(5)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>x1</strong></td><td>Number</td><td>X坐标1</td></tr>
									<tr><td><strong>y1</strong></td><td>Number</td><td>Y坐标1</td></tr>
									<tr><td><strong>......</strong></td><td></td><td>......</td></tr>
									<tr><td><strong>xn</strong></td><td>Number</td><td>X坐标n</td></tr>
									<tr><td><strong>yn</strong></td><td>Number</td><td>Y坐标n</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>fdom</td><td>返回draw链</td></tr>
			</table>
					<h3>语法8：.line(x1,y1,x2,y2,lineType)</h3>
						<table class="args">
				<!--caption>参数列表：(5)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>x1</strong></td><td>Number</td><td>X坐标1</td></tr>
									<tr><td><strong>y1</strong></td><td>Number</td><td>Y坐标1</td></tr>
									<tr><td><strong>x2</strong></td><td>Number</td><td>X坐标2</td></tr>
									<tr><td><strong>y2</strong></td><td>Number</td><td>Y坐标2</td></tr>
									<tr><td><strong>lineType</strong><em> (可选)</em></td><td>Number</td><td>线型</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>fdom</td><td>返回draw链</td></tr>
			</table>
					<h3>语法9：.getctx()</h3>
							<div>描述：获取CTX对象,仅限内部使用</div>
						<table class="args">
				<!--caption>参数列表：(0)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>Node</td><td>返回CTX对象</td></tr>
			</table>
				<div class="example">
			<h3>示例 : </h3>
							<h5 xmlns="">CSS代码:</h5>
				<pre xmlns=""><code id="cssbox"></code></pre>
						
							<h5 xmlns="">HTML代码:</h5>
				<pre xmlns=""><code id="htmlbox"></code></pre>
									
				<h5 xmlns="">JS代码:</h5>
				<pre xmlns=""><code id="jsbox"></code></pre>
								</div>
		<div style="text-align:right">
			
					
				<button onclick="window.open('../codepages/82.html');">运行代码</button>
						
		</div><br/>	
		<div>
			<h3>同类参考 :</h3>
			<div>
							<span><a href='177.html'>F().anime</a></span>&#12288;|&#12288;							<span><a href='48.html'>F().drag</a></span>&#12288;|&#12288;							<span><a href='75.html'>F.dialog</a></span>&#12288;|&#12288;							<span><a href='51.html'>F().slides</a></span>&#12288;|&#12288;							<span><a href='74.html'>F.pagination</a></span>&#12288;|&#12288;							<span><a href='80.html'>F().tree</a></span>&#12288;|&#12288;							<span><a href='50.html'>F.menu</a></span>&#12288;|&#12288;							<span><a href='32.html'>F.datePicker</a></span>&#12288;|&#12288;							<span><a href='28.html'>F.colorPicker</a></span>						</div>
		</div>
	</div>
</div><br />

<textarea id="css" style="display:none;">*{margin:0; padding:0}
html,body{width:100%; height:100%;}
.box{width:1000px; height:500px; background-color:#000000;}</textarea>
<textarea id="html" style="display:none;"><?import namespace="v" urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />

<div id="canvasbox" class="box"></div></textarea>
<textarea id="js" style="display:none;">var drawer = F.canvas("canvasbox").ops("#ffffff","#ff00ff",2);
var line = drawer.copy().range(0,0,1000,500).line(250,60,500,400).line(750,60,500,400).line(250,60,750,60);
var circle = drawer.copy().range(210,20,80,80).circle().fill();
var rect = drawer.copy().range(400,350,200,100).rect().stroke();
var polygon = drawer.copy().range(705,25,90,70).polygon(0,0, 90,0, 75,70, 15,70).stroke().fill();</textarea>
<textarea id="result" style="display:none;"></textarea>


<script type="text/javascript">
var css = F('css').val();
var html = F('html').val();		
var js = F('js').val();
var result = F('result').val();
css && F('cssbox').highlight(css, "css");
html && F('htmlbox').highlight(html, "html");
js && F('jsbox').highlight(js, "js");
result && F('resultbox').highlight(result,"js");
</script>

</body>
</html>